import React from "react";
import { Checkbox as FormilyCheckbox } from "../../packages/formily-antd-v5/src";
import {
  createBehavior,
  createResource,
} from "../../packages/designable-core/src";
import { DnFC } from "../../packages/designable-react/src";
import { createFieldSchema } from "../Field";
import { AllSchemas } from "../../schemas";
import { AllLocales } from "../../locales";

export const Checkbox: DnFC<React.ComponentProps<typeof FormilyCheckbox>> =
  FormilyCheckbox;

Checkbox.Behavior = createBehavior({
  name: "Checkbox.Group",
  extends: ["Field"],
  selector: (node) => node.props["x-component"] === "Checkbox.Group",
  designerProps: {
    propsSchema: createFieldSchema(AllSchemas.Checkbox.Group),
  },
  designerLocales: AllLocales.CheckboxGroup,
});

Checkbox.Resource = createResource("Inputs", {
  icon: "CheckboxGroupSource",
  elements: [
    {
      componentName: "Field",
      props: {
        type: "Array<string | number>",
        title: "Checkbox Group",
        "x-decorator": "FormItem",
        "x-component": "Checkbox.Group",
        enum: [
          { label: "选项1", value: 1 },
          { label: "选项2", value: 2 },
        ],
      },
    },
  ],
});
